<template>
  <div>
    <div class="formWp">
      <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
        <FormItem label="用户名" prop="loginName">
          <Input v-model.trim="formValidate.loginName" placeholder="请输入用户名"></Input>
        </FormItem>
        <FormItem label="密码" prop="loginKey">
          <Input
            v-model.trim="formValidate.loginKey"
            :type="showWord?'text':'password'"
            placeholder="请输入密码"
          ></Input>
        </FormItem>
        <FormItem label="确认密码" prop="loginKey2">
          <Input
            v-model.trim="formValidate.loginKey2"
            :type="showWord?'text':'password'"
            placeholder="请再次输入密码"
          ></Input>
          <div class="showword">
            <Icon type="md-eye" size="25" @click="showPass" v-show="!showWord" />
            <Icon type="md-eye-off" size="25" @click="showPass" v-show="showWord" />
          </div>
        </FormItem>
        <FormItem label="真实姓名" prop="name">
          <Input v-model.trim="formValidate.name" placeholder="请输入您的真实姓名"></Input>
        </FormItem>
        <FormItem label="性别" prop="gender">
          <RadioGroup v-model="formValidate.gender">
            <Radio label="男">男</Radio>
            <Radio label="女">女</Radio>
          </RadioGroup>
        </FormItem>
        <FormItem label="手机号码" prop="mobile">
          <Input v-model.trim="formValidate.mobile" placeholder="请输入您的手机号码"></Input>
        </FormItem>
        <FormItem>
          <Button type="primary" @click="registe('formValidate')">注册</Button>
          <Button @click="resetForm('formValidate')" style="margin-left: 8px">清空</Button>
          <Button @click="go2Login" style="margin-left: 8px">取消</Button>
        </FormItem>
      </Form>
    </div>
  </div>
</template>

<script>
import axios from "../axios";
import { RegisteUrl } from "../baseUrl/index";
export default {
  data() {
    return {
      showWord: false,
      formValidate: {
        loginName: "",
        loginKey: "",
        loginKey2: "",
        name: "",
        gender: "",
        mobile: ""
      },
      ruleValidate: {
        loginName: [
          {
            required: true,
            message: "用户名不能为空",
            trigger: "blur"
          },
          {
            type: "string",
            min: 5,
            message: "用户名不能少于5个字符",
            trigger: "blur"
          }
        ],
        loginKey: [
          {
            required: true,
            message: "密码不能为空",
            trigger: "blur"
          },
          {
            type: "string",
            min: 6,
            message: "密码长度必须在6位以上",
            trigger: "blur"
          }
        ],
        loginKey2: [
          {
            required: true,
            message: "密码不能为空",
            trigger: "blur"
          },
          {
            type: "string",
            min: 6,
            message: "密码长度必须在6位以上",
            trigger: "blur"
          },
          {
            type: "enum",
            message: "两次密码输入不一致",
            enum: ['123123'],
            // enum: ["123123"],
            trigger: "blur"
          }
        ],
        name: [
          {
            required: true,
            message: "请输入真实姓名",
            trigger: "blur"
          }
        ],
        gender: [
          {
            required: true,
            message: "请选择性别",
            trigger: "change"
          }
        ],
        mobile: [
          {
            required: true,
            message: "请输入您的手机号码",
            trigger: "blur"
          },
          {
            type: "string",
            min: 11,
            max: 11,
            message: "手机号码长度必须为11位",
            trigger: "blur"
          }
        ]
      }
    };
  },
  methods: {
    registe(name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          axios({
            url: RegisteUrl,
            method: "get",
            params: {
              transform: 1,
              order: "id,desc",
              filter: `loginName,eq,${this.formValidate.loginName}`
            },
            success: data => {
              let getUser = data.data.users[0];
              if (getUser === undefined) {
                this.post();
              } else {
                alert("该用户已存在");
              }
            }
          });
        }
      });
    },
    post() {
      axios({
        url: RegisteUrl,
        method: "post",
        data: this.formValidate,
        success: data => {
          this.$Message.success("Success!");
          this.go2Login();
        }
      });
    },
    resetForm(name) {
      this.$refs[name].resetFields();
    },
    go2Login() {
      this.$router.push("/");
    },
    showPass() {
      this.showWord = !this.showWord;
    }
  }
};
</script>

<style scoped>
.formWp {
  width: 40%;
  margin: 50px auto 0;
  padding: 10px;
}
.showword {
  position: absolute;
  top: 0;
  right: -40px;
}
</style>
